<template>
    <div class="main">
        <el-container class="subbox">
            <el-aside :style="{width:collapse?'63px':'200px'}">
                <Menu></Menu>
            </el-aside>
            <el-container class="mbox">
                <el-header>
                    <Head></Head>
                </el-header>
                <el-main class="content">
                    <router-view></router-view>
                </el-main>
                <el-footer>
                    <Foot></Foot>
                </el-footer>
            </el-container>
        </el-container>
    </div>
</template>

<script>
import { computed, onMounted } from '@vue/runtime-core'
import {ajax} from '@/api'
import {useStore} from 'vuex'
import Foot from "@/components/Foot.vue"
import Menu from "@/components/Menu.vue"
import Head from "@/components/Head.vue"


export default {
    components:{
        Foot,
        Menu,
        Head
    },
    setup(props){
        const store = useStore()
        const getUserInfo = async ()=>{
            let res= await ajax.getUserInfo()
            store.commit('changeUserInfo',res.result)
        }
        const userInfo = computed(()=>store.state.userInfo);
        const collapse = computed(()=>store.state.collapse)

        onMounted(()=>{
            console.log(store)
            store.dispatch('getRoleListAsync')
            getUserInfo()
        })
        return {
            userInfo,
            collapse
        }
    }
}
</script>

<style lang="scss" scoped>
.main{
    width:100%;
    height:100%;
    .subbox{
        width:100%;
        height:100%;
        .mbox{
            .el-footer{
                background: #123456;
            }
            .el-header{
                background: #f4f4f4;
            }
        }
    }
}
</style>